<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="content-section">
    <h2><i class="fas fa-procedures"></i> 办理换床 </h2>
    <div class="search-bar">
        <input type="text" placeholder="输入病人姓名搜索...">
        <button class="search-btn"><i class="fas fa-search"></i> 搜索</button>
    </div>
    <table class="patients-table">
        <thead>
            <tr>
                <th>病历号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>联系电话</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

<script>
$(document).ready(function() {
    // 页面加载时获取所有病人
    loadPatients();

    // 搜索按钮点击事件
    $('.search-btn').click(function() {
        loadPatients();
    });

    // 搜索框回车事件
    $('.search-bar input').keypress(function(e) {
        if(e.which == 13) {
            loadPatients();
        }
    });
});

function loadPatients() {
    var searchName = $('.search-bar input').val();

    $.get('/0201/myPatients', { searchName: searchName }, function(patients) {
        var tbody = $('.patients-table tbody');
        tbody.empty();

        patients.forEach(function(patient) {
            var row = $('<tr>');
            row.append($('<td>').text(patient.patientId));
            row.append($('<td>').text(patient.patientName));
            row.append($('<td>').text(patient.patientGender));
            row.append($('<td>').text(patient.patientAge));
            row.append($('<td>').text(patient.patientPhone || '-'));
            
            // 添加换床链接
            var transferLink = $('<a>', {
                href: 'javascript:void(0)',
                text: '办理换床',
                class: 'transfer-link',
                click: function() {
                    handleTransfer(patient.patientId, patient.patientName);
                }
            });
            row.append($('<td>').append(transferLink));

            tbody.append(row);
        });
    });
}

// 处理换床操作
function handleTransfer(patientId, patientName) {
    // 获取病人当前床位信息
    $.get('/0201/myPatients/detail/' + patientId, function(detail) {
        // 创建换床表单的模态框
        var modalContent = '<div class="modal-content">' +
            '<h3>病床调换</h3>' +
            '<div class="detail-info">' +
            '<p><strong>病人姓名：</strong>' + detail.patientName + '</p>' +
            '<p><strong>当前床位：</strong>' + detail.floorNum + '楼 ' +
            detail.wardNum + '号房 ' + detail.bedNum + '号床</p>' +
            '</div>' +
            '<div class="transfer-form">' +
            '<div class="form-group">' +
            '<label for="floorNum">选择楼层</label>' +
            '<select id="floorNum" required>' +
            '<option value="">请选择楼层</option>' +
            '</select>' +
            '</div>' +
            '<div class="form-group">' +
            '<label for="wardNum">选择病房</label>' +
            '<select id="wardNum" required disabled>' +
            '<option value="">请先选择楼层</option>' +
            '</select>' +
            '</div>' +
            '<div class="form-group">' +
            '<label for="bedNum">选择床位</label>' +
            '<select id="bedNum" required disabled>' +
            '<option value="">请先选择病房</option>' +
            '</select>' +
            '</div>' +
            '<div class="form-buttons">' +
            '<button onclick="confirmTransfer(' + patientId + ')" class="submit-btn">确认换床</button>' +
            '<button onclick="closeModal()" class="cancel-btn">取消</button>' +
            '</div>' +
            '</div></div>';

        showModal(modalContent);
        
        // 加载楼层列表
        loadFloors();
        
        // 绑定选择事件
        $('#floorNum').change(function() {
            loadWards($(this).val());
            $('#wardNum').prop('disabled', false);
            $('#bedNum').prop('disabled', true).html('<option value="">请先选择病房</option>');
        });
        
        $('#wardNum').change(function() {
            loadBeds($(this).val());
            $('#bedNum').prop('disabled', false);
        });
    });
}

// 加载楼层
function loadFloors() {
    $.get('/0201/bedTransfer/floors', function(floors) {
        var select = $('#floorNum');
        select.find('option:not(:first)').remove();
        
        floors.forEach(function(floor) {
            select.append($('<option>', {
                value: floor,
                text: floor + '楼'
            }));
        });
    });
}

// 加载病房
function loadWards(floorNum) {
    if (!floorNum) return;
    
    $.get('/0201/bedTransfer/wards', { floorNum: floorNum }, function(wards) {
        var select = $('#wardNum');
        select.find('option:not(:first)').remove();
        
        wards.forEach(function(ward) {
            select.append($('<option>', {
                value: ward.wardId,
                text: ward.wardNum + '号房'
            }));
        });
    });
}

// 加载床位
function loadBeds(wardId) {
    if (!wardId) return;
    
    $.get('/0201/bedTransfer/beds', { wardId: wardId }, function(beds) {
        var select = $('#bedNum');
        select.find('option:not(:first)').remove();
        
        beds.forEach(function(bed) {
            select.append($('<option>', {
                value: bed.bedId,
                text: bed.bedNum + '号床'
            }));
        });
    });
}

// 确认换床
function confirmTransfer(patientId) {
    var newBedId = $('#bedNum').val();
    
    if (!newBedId) {
        alert('请选择新床位');
        return;
    }
    
    if (confirm('确定要为病人更换床位吗？')) {
        $.ajax({
            url: '/0201/bedTransfer',
            type: 'POST',
            data: {
                patientId: patientId,
                newBedId: newBedId
            },
            success: function(response) {
                alert('换床成功！');
                closeModal();
                loadPatients(); // 刷新病人列表
            },
            error: function(xhr) {
                var errorMsg = '换床失败';
                if (xhr.responseJSON && xhr.responseJSON.error) {
                    errorMsg = xhr.responseJSON.error;
                }
                alert(errorMsg);
            }
        });
    }
}

function viewPatientDetail(patientId) {
    $.get('/0201/myPatients/detail/' + patientId, function(detail) {
        var modalContent = '<div class="modal-content">' +
            '<h3>病人详细信息</h3>' +
            '<div class="detail-info">' +
            '<p><strong>病人姓名：</strong>' + detail.patientName + '</p>' +
            '<p><strong>性别：</strong>' + detail.patientGender + '</p>' +
            '<p><strong>年龄：</strong>' + detail.patientAge + '</p>' +
            '<p><strong>联系电话：</strong>' + (detail.patientPhone || '-') + '</p>' +
            '<p><strong>住院信息：</strong>' + detail.floorNum + '楼 ' +
            detail.wardNum + '号房 ' + detail.bedNum + '号床</p>' +
            '<p><strong>病情描述：</strong>' + (detail.conditionDesc || '暂无描述') + '</p>' +
            '<p><strong>入住时间：</strong>' + (detail.date || '暂无描述') + '</p>'
            '</div></div>';

        showModal(modalContent);
    });
}

// 添加显示模态框的函数
function showModal(content) {
    // 如果已存在模态框，先移除
    $('.modal-overlay').remove();
    
    // 创建模态框
    var modalHtml = '<div class="modal-overlay">' +
        '<div class="modal-wrapper">' +
        content +
        '</div></div>';
    
    $('body').append(modalHtml);
}

// 添加关闭模态框的函数
function closeModal() {
    $('.modal-overlay').remove();
}
</script>

<style>
/* 表格样式优化 */
.patients-table {
    margin-top: 20px;
    width: 100%;
    border-collapse: collapse;
}

.patients-table th,
.patients-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}

.patients-table th {
    background-color: #f5f5f5;
    font-weight: 600;
}

.patients-table tr:hover {
    background-color: #f8f9fa;
}

/* 搜索栏样式优化 */
.search-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.search-bar input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.search-bar input:focus {
    outline: none;
    border-color: #4CAF50;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

.search-btn {
    padding: 8px 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.search-btn:hover {
    background-color: #45a049;
}

/* 添加换床链接样式 */
.transfer-link {
    color: #007bff;
    text-decoration: none;
    cursor: pointer;
}

.transfer-link:hover {
    text-decoration: underline;
    color: #0056b3;
}

.transfer-form {
    margin-top: 20px;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 4px;
}

.transfer-form .form-group {
    margin-bottom: 15px;
}

.transfer-form select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.transfer-form select:disabled {
    background-color: #e9ecef;
    cursor: not-allowed;
}

.form-buttons {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.submit-btn,
.cancel-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.submit-btn {
    background-color: #007bff;
    color: white;
}

.submit-btn:hover {
    background-color: #0056b3;
}

.cancel-btn {
    background-color: #6c757d;
    color: white;
}

.cancel-btn:hover {
    background-color: #545b62;
}

/* 添加模态框样式 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-wrapper {
    background: white;
    padding: 20px;
    border-radius: 5px;
    max-width: 80%;
    max-height: 80%;
    overflow-y: auto;
}

.modal-content {
    margin-bottom: 20px;
}

.detail-info {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 4px;
}

.detail-info p {
    margin: 8px 0;
}

.detail-info strong {
    display: inline-block;
    width: 100px;
}
</style>